<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>莒县旅行社</title>

<!-- CSS -->
<link rel="stylesheet"
	href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/form-elements.css">
<link rel="stylesheet" href="assets/css/style.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed"
	href="assets/ico/apple-touch-icon-57-precomposed.png">

</head>

<body>

	<!-- Top content -->
	<div class="top-content">

		<div class="inner-bg">
			<div class="container">
				<div class="row">
					<div class="col-sm-8 col-sm-offset-2 text">
						<h1>
							<strong>莒县旅行社</strong> 游客登陆
						</h1>
						<div class="description">
							<p>
								欢迎来到莒县旅行社！ <a href="#"><strong></strong></a>, customize and use
								it as you like!
							</p>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6 col-sm-offset-3 form-box">
						<div class="form-top">
							<div class="form-top-left">
								<h3>请输入您的账号</h3>
								<p>Enter your username and password to log on:</p>
							</div>
							<div class="form-top-right">
								<i class="fa fa-key"></i>
							</div>
						</div>
						<div class="form-bottom">
							<form class="form-horizontal" action="Login">
								<div class="form-group has-feedback" id="div1">
									<label for="inputEmail3" class="col-sm-2 control-label">用户名:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" name="email" id="text"
											placeholder="请输入用户名"> <span
											class="glyphicon glyphicon-ok form-control-feedback hidden "></span>
									</div>
								</div>
								<div class="form-group has-feedback" id="div2">
									<label for="inputPassword3" class="col-sm-2 control-label">密码:</label>
									<div class="col-sm-10">
										<input type="password" name="password" class="form-control"
											id="pwd" placeholder="请输入密码"> <span
											class="glyphicon glyphicon-ok form-control-feedback hidden"></span>
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-offset-2 col-sm-10">
										<button type="submit" class="btn btn-default">登录</button>

									</div>
								</div>
							</form>
							<p>
								还没有账号？ <a href="Register.html"><strong>立刻注册！</strong></a>
							</p>
							<p>
								我是管理员 <a href="admin/Login.jsp"><strong>立刻登录！</strong></a>
							</p>
						</div>
					</div>
				</div>

			</div>

		</div>


		<!-- Javascript -->
		<script src="assets/js/jquery-1.11.1.min.js"></script>
		<script src="assets/bootstrap/js/bootstrap.min.js"></script>
		<script src="assets/js/jquery.backstretch.min.js"></script>
		<script src="assets/js/scripts.js"></script>

		<!--[if lt IE 10]>
            <script src="assets/js/placeholder.js"></script>
        <![endif]-->
		<script>
			$(function() {

				var userReg = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/;
				//
				//var pwdReg =  /^[a-zA-Z0-9]{6,10}$/;
				var pwdReg = /\S/;
				//匹配正则表达式
				validateForm($('#text'), userReg, $('#div1'));

				validateForm($('#pwd'), pwdReg, $('#div2'));

				function validateForm($obj, reg, $div) {

					$obj
							.on({
								//失去焦点是
								blur : function() {
									//得到表单内的值
									var val = $(this).val();
									//正则表达式匹配
									if (reg.test(val)) {
										//符合正则规则
										$(this).attr('index', '1');
										$div.addClass(" has-success");
										$div.removeClass(" has-error");
										$div.find($obj.next()[0]).removeClass(
												'glyphicon-remove');
									} else {
										//不符合正则
										$(this).attr('index', '0');
										$div.removeClass(" has-success");
										$div.addClass(" has-error");
										$div.find($obj.next()[0]).removeClass(
												'hidden');
										$div.find($obj.next()[0]).addClass(
												'glyphicon-remove');
									}

								},

								focus : function() {

									$(this).val("");

								}

							})

				}

				$('button').click(function() {

					var att1 = parseInt($('#text').attr('index'));
					var att2 = parseInt($('#pwd').attr('index'));

					if (att1 && att2) {

						$('form').submit();

					}

					return false;

				})

			})
		</script>
</body>

</html>